<html>

<head>
    <title>定时任务</title>
    <script src="./static/js/vue.js"></script>
    <script src="./static/js/heyui.js"></script>
    <script src="./static/js/axios.min.js"></script>
    <link rel="stylesheet" href="./static/css/index.css">
    </link>
    <style>
        body {
            background: #f0f2f5;
        }

        #app {
            background: #ffffff;
            width: 90%;
            /* height: 800px; */
            margin: 50px auto;
        }
    </style>
</head>


<body>
<div id="app">
    <div class="h-panel">
        <div class="h-panel-bar">
            <span class="h-panel-title">定时任务</span>
            <div class="h-panel-right"><span v-font="14">刷新时间：</span><span
                    :style="{color:freshTime == 'error' ? 'red':'green'}" v-font="14">{{freshTime}}</span></div>
        </div>
    </div>
    <div class="h-panel-bar">
        <span class="link" @click="open = true;">添加</span>
        <h-modal v-model="open">
            <div>
                <h-header class="h-modal-header">添加任务</h-header>
                <div style="padding:15px">
                    <h-form>
                        <h-formitem label="名称：">
                            <input type="text" v-model="job.name" />
                        </h-formitem>
                        <h-formitem label="组：">
                            <input type="text" v-model="job.group" />
                        </h-formitem>
                        <h-formitem label="备注：">
                            <input type="text" v-model="job.description" />
                        </h-formitem>
                        <h-formitem label="类名：">
                            <input type="text" placeholder="com.xxx.xxx.xxx" v-model="job.className" />
                        </h-formitem>
                        <h-formitem label="表达式：">
                            <input type="text" placeholder="* * * * * ?" v-model="job.cronExpression" />
                        </h-formitem>
                    </h-form>
                </div>
                <h-footer class="h-modal-footer">
                    <button class="h-btn h-btn-primary" @click="addJob();">确定</button>
                    <button class="h-btn" @click="cancelAdd();">取消</button>
                </h-footer>
            </div>
        </h-modal>
        <div class="h-panel-right">
            <h-search placeholder="查询" v-width="200" v-model="searchWord"></h-search><i class="h-split"></i><button
                class="h-btn h-btn-green h-btn-m" @click="searchJobs">查询</button>
        </div>
    </div>
    <div class="h-panel-body bottom-line">
        <h-table :datas="datas">
            <h-table-item title="名称" prop="name"></h-table-item>
            <h-table-item title="组" prop="group"></h-table-item>
            <h-table-item title="类名" prop="className"></h-table-item>
            <h-table-item title="表达式" prop="cronExpression"></h-table-item>
            <h-table-item title="上次运行" prop="prevTime"></h-table-item>
            <h-table-item title="下次运行" prop="nextTime"></h-table-item>
            <h-table-item title="状态" prop="state"></h-table-item>
            <h-table-item title="备注" prop="description"></h-table-item>
            <h-table-item title="操作" :width="400" align="center">
                <template slot-scope="{data}">
                    <button class="h-btn h-btn-green" @click="runOnce(data)">运行</button>
                    <button class="h-btn h-btn-red" @click="remove(data)">移除</button>
                    <button class="h-btn h-btn-yellow" @click="pause(data)">暂停</button>
                    <button class="h-btn h-btn-blue" @click="resume(data)">恢复</button>
                    <button class="h-btn h-btn-red" @click="openReschedule(data)">重定时</button>
                    <button class="h-btn h-btn-gray" @click="openLogs(data)">记录</button>

                </template>
            </h-table-item>
        </h-table>
    </div>
    <div class="h-panel-bar">
        <h-pagination :cur="pagination.cur" :total="pagination.total" :small="true" align="right"
                      @change="turnTheJobPage" :size="pagination.size" :sizes="pagination.sizes">
        </h-pagination>
    </div>
    <h-modal v-model="log.logOpen">
        <div>
            <h-header class="h-modal-header">运行记录</h-header>
            <div style="padding:15px">
                <h-table :datas="log.logs">
                    <h-table-item title="名称" prop="name"></h-table-item>
                    <h-table-item title="组" prop="group"></h-table-item>
                    <h-table-item title="开始" prop="startTime"></h-table-item>
                    <h-table-item title="结束" prop="endTime"></h-table-item>
                    <h-table-item title="异常" prop="jobException"></h-table-item>
                    <h-table-item title="备注" prop="mark"></h-table-item>
                </h-table>
            </div>
            <div class="h-panel-bar">
                <h-pagination :cur="log.pagination.cur" :total="log.pagination.total" :small="true" align="right"
                              @change="turnTheLogPage" :size="log.pagination.size" :sizes="log.pagination.sizes">
                </h-pagination>
            </div>
        </div>
    </h-modal>
    <h-modal v-model="rescheduling">
        <div>
            <h-header class="h-modal-header">重新定时</h-header>
            <div style="padding:15px">
                <h-form>
                    <h-formitem label="名称：">
                        <input type="text" v-model="job.name" disabled="disabled" />
                    </h-formitem>
                    <h-formitem label="组：">
                        <input type="text" v-model="job.group" disabled="disabled" />
                    </h-formitem>
                    <h-formitem label="备注：">
                        <input type="text" v-model="job.description" disabled="disabled" />
                    </h-formitem>
                    <h-formitem label="类名：">
                        <input type="text" placeholder="com.xxx.xxx.xxx" v-model="job.className"
                               disabled="disabled" />
                    </h-formitem>
                    <h-formitem label="表达式：">
                        <input type="text" placeholder="* * * * * ?" v-model="job.cronExpression" />
                    </h-formitem>
                </h-form>
            </div>
            <h-footer class="h-modal-footer">
                <button class="h-btn h-btn-primary" @click="reschedule();">确定</button>
                <button class="h-btn" @click="cancelReschedule();">取消</button>
            </h-footer>
        </div>
    </h-modal>
</div>

<script>
        Vue.prototype.$axios = axios;
        const app = new Vue({
            el: '#app',
            data: {
                freshTime: '~~',
                open: false,
                searchWord: '',
                datas: [],
                rescheduling: false,
                pagination: {
                    cur: 1,
                    total: 0,
                    size: 10,
                    sizes: [10]
                },
                job: {
                    name: '',
                    group: '',
                    description: '',
                    className: '',
                    cronExpression: '',
                    reset: function () {
                        this.name = '';
                        this.group = '';
                        this.description = '';
                        this.className = '';
                        this.cronExpression = '';
                    }
                },
                log: {
                    logOpen: false,
                    logs: [],
                    row: null,
                    pagination: {
                        cur: 1,
                        total: 10,
                        size: 10,
                        sizes: [10]
                    }
                }
            },
            mounted: function () {
                this.loadTable();
                window.setInterval(() => {
                    this.loadTable();
                }, 2 * 1000);
            },
            methods: {
                loadTable: function () {
                    this.$axios.post('./jobs', {
                        name: this.searchWord,
                        ...this.pagination
                    }).then(r => {
                        let _data = r.data;
                        if (_data.success) {
                            this.datas = _data.body.jobs.rows;
                            this.pagination.total = _data.body.jobs.total;
                            this.freshTime = _data.body.time;
                        } else {

                        }
                    }).catch(e => {
                        this.freshTime = 'error';
                    });
                },
                turnTheJobPage: function (pagination) {
                    this.pagination.cur = pagination.cur;
                    this.pagination.size = pagination.size;
                    this.loadTable();
                },
                searchJobs: function () {
                    this.pagination.cur = 1;
                    this.loadTable();
                },
                addJob: function () {
                    this.open = false;
                    this.$axios.post('./add', this.job).then(r => {
                        let _data = r.data;
                        if (_data.success) {
                            this.job.reset();
                            this.$Message['success']('添加任务成功！');
                            this.loadTable();
                        } else {
                            this.$Message['error']('添加任务失败！');
                        }
                    }).catch(e => {
                        this.$Message['error']('系统出错！');
                    });
                },
                runOnce: function (row) {
                    this.$axios.post('./run', row).then(r => {
                        let _data = r.data;
                        if (_data.success) {
                            this.$Message['success']('请求成功！');
                            this.loadTable();
                        } else {
                            this.$Message['error']('请求失败！');
                        }
                    }).catch(e => {
                        this.$Message['error']('系统出错！');
                    });
                },
                remove: function (row) {
                    this.$axios.post('./remove', row).then(r => {
                        let _data = r.data;
                        if (_data.success) {
                            this.$Message['success']('移除成功！');
                            this.loadTable();
                        } else {
                            this.$Message['error']('移除失败！');
                        }
                    }).catch(e => {
                        this.$Message['error']('系统出错！');
                    });
                },
                pause: function (row) {
                    this.$axios.post('./pause', row).then(r => {
                        let _data = r.data;
                        if (_data.success) {
                            this.$Message['success']('暂停成功！');
                            this.loadTable();
                        } else {
                            this.$Message['error']('暂停失败！');
                        }
                    }).catch(e => {
                        this.$Message['error']('系统出错！');
                    });
                },
                resume: function (row) {
                    this.$axios.post('./resume', row).then(r => {
                        let _data = r.data;
                        if (_data.success) {
                            this.$Message['success']('恢复成功！');
                            this.loadTable();
                        } else {
                            this.$Message['error']('恢复失败！');
                        }
                    }).catch(e => {
                        this.$Message['error']('系统出错！');
                    });
                },
                openLogs: function (row) {
                    this.log.row = row;
                    this.log.pagination.cur = 1;
                    this.log.pagination.total = 0;
                    this.log.pagination.size = 10;
                    this.loadLogs();
                },
                loadLogs: function () {
                    this.$axios.post('./logs', {
                        ...this.log.row,
                        ...this.log.pagination
                    }).then(r => {
                        let _data = r.data;
                        if (_data.success) {
                            this.log.logs = _data.body.rows;
                            this.log.pagination.total = _data.body.total;
                            this.log.logOpen = true;
                        } else {
                            this.$Message['error']('出错了！');
                        }
                    }).catch(e => {
                        this.$Message['error']('出错了！');
                    });
                },
                turnTheLogPage: function (pagination) {
                    this.log.pagination.cur = pagination.cur;
                    this.log.pagination.size = pagination.size;
                    this.loadLogs();
                },
                openReschedule: function (row) {
                    this.job.name = row.name;
                    this.job.group = row.group;
                    this.job.description = row.description;
                    this.job.className = row.className;
                    this.job.cronExpression = row.cronExpression;

                    this.rescheduling = true;
                },
                reschedule: function () {
                    this.$axios.post('./reschedule', this.job).then(r => {
                        let _data = r.data;
                        if (_data.success) {
                            this.job.reset();
                            this.$Message['success']('重新定时任务成功！');
                            this.loadTable();
                        } else {
                            this.$Message['error']('重新定时任务失败！');
                        }
                    }).catch(e => {
                        this.$Message['error']('系统出错！');
                    });
                    this.rescheduling = false;
                },
                cancelReschedule: function () {
                    this.rescheduling = false;
                    this.job.reset();
                },
                cancelAdd: function () {
                    this.open = false;
                    this.job.reset();
                }
            },
            watch: {
                searchWord: function () {
                    this.pagination.cur = 1;
                },
                rescheduling: function (v, old) {
                    if (v === false)
                        this.job.reset();
                }
            }
        });
    </script>
</body>



</html>